<template>
  <el-dialog :title="tableTitle" v-model="props.dialogVisible" width="70%" top="30vh" center @open="tableOpen"
    :before-close="cancelClick"> 
    <div class="bodyBox">
      <el-table class="tableCss" border v-loading="tableLoading" :data="formattedRuleForm"
        :default-sort="{ prop: 'date', order: 'descending' }" height="calc(100vh - 775px)"
        :show-overflow-tooltip="true">
        <el-table-column prop="reported_user_id" label="被举报人ID" width="120">
          <template #default="scope">
            {{ scope.row.reported_user_id }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="user_name" label="用户名" width="130">
          <template #default="scope">
            {{ scope.row.user_name }}
          </template>
        </el-table-column> -->
        <el-table-column prop="report_reason_type" label="举报分类" width="100"></el-table-column>
        <el-table-column prop="reason" label="举报理由" width="">
          <template #default="scope">
            {{ scope.row.reason }}
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="管理员姓名" width="130">
          <template #default="scope">
            {{ scope.row.handler_account }}
          </template>
        </el-table-column>
        <el-table-column prop="handle_type" label="用户处理" width="170">
          <template #default="scope">
            <view v-if="!isStatus">
              <span v-if="scope.$index + 1 === 1" style="color: red;">*</span>
              <el-select v-model="scope.row.handle_type" placeholder="用户处理" style="" @change="handleTypeChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </view>
            <view v-else>
              <el-select v-model="scope.row.handle_type" placeholder="用户处理" style="" disabled="true">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </view>
          </template>
        </el-table-column>
        <el-table-column v-if="!isStatus" prop="limit_time" label="处罚天数" width="150">
          <template #default="scope">
            <el-select v-model="scope.row.limit_time" placeholder="处罚天数" style="" :disabled="unable">
              <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column v-else prop="unsealing_time" label="处罚过期时间" width="250">
          <!-- <template #default="scope">
            <view>
            </view>
          </template> -->
        </el-table-column>
        <el-table-column prop="handle_remark" label="操作理由" width="300">
          <template #default="scope">
            <view v-if="!isStatus">
              <span v-if="scope.$index + 1 === 1" style="color: red;">*</span>
              <el-input type="textarea" v-model="scope.row.handle_remark" :autosize="{ minRows: 1, maxRows: 4 }" placeholder="请输入" style="width: 92%;" />
            </view>
            <view v-else>
              {{scope.row.handle_remark}}
            </view>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelClick" :loading="btnLoading" style="margin-right: 1rem;">关 闭</el-button>
      <el-button v-if="!isStatus" type="primary" @click="submitForm()" :loading="btnLoading">提交</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps,computed } from 'vue'
import cloneDeep from 'lodash/cloneDeep';
import type { FormInstance } from 'element-plus'
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  tableLoading: {
    type: Boolean,
    default: false,
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  tableTitle: {
    type: String,
    default: '',
  },
  ruleForm: {
    type: Array as () => RuleForm[], // 明确指定数组元素类型
    default: () => [],
  },
  isStatus:{
    type:Number,
    default:-1
  }
})
interface RuleForm {
  reported_user_id?: number;  //被举报人id
  // user_name?: string;         //用户名  x
  report_reason_type?: string, //举报分类（0-9）
  reason?: string;            //举报原因
  handle_type?:string;        // 处理方式（0:不违规，1：违规并有封禁时间，2封号） √
  limit_time?:number;         //限制时长（单位：天） handle_type为1的时候才会有时间
  handle_remark?:string;      //操作理由 √
  report_id?:number;          //举报id
  handler_account?:string,
  unsealing_time?:string
  report_handle_id?:number
}
let ruleFormData = ref<RuleForm[]>([
  { reported_user_id:0, report_reason_type: '', reason:'',handle_type:'',limit_time:3,handle_remark:'',handler_account:'',unsealing_time:''},
]);
const options = [
  {
    value: '0',
    label: '不做处理',
  },
  {
    value: '1',
    label: '内容评论封禁',
  },
  {
    value: '2',
    label: '账号封禁',
  },
]
const unable = ref(false)
const handleTypeChange =(value:string)=>{
  if(value === '0'){
    unable.value = true
    formattedRuleForm.value[0].limit_time=3
  }else{
    unable.value = false
  }
}

const dateOptions = [
  {
    value: 3,label: '3',
  },
  {
    value: 4,label: '4',
  },
  {
    value: 5,label: '5',
  },
  {
    value: 6,label: '6',
  },
  {
    value: 7,label: '7',
  },
]

// 定义分类映射类型
type ReportCateMap = {
  '1': string;
  '2': string;
  '3': string;
  '4': string;
  '5': string;
  '6': string;
  '7': string;
  '8': string;
  '9': string;
  '10': string;
};
// 定义违规分类映射关系
const reportCateMap = ref<ReportCateMap>({
  '1': '血腥暴力',
  '2': '色情低俗',
  '3': '侵犯权益',
  '4': '造谣抹黑',
  '5': '人身攻击',
  '6': '引战骚扰',
  '7': '广告营销',
  '8': '侮辱英烈',
  '9': '违法违规',
  '10': '其他'
});
// 格式化举报分类字段（report_reason_type）
const formattedRuleForm = computed(() => {
  return props.ruleForm.map(item => ({
    ...item,
    report_reason_type: reportCateMap.value[item.report_reason_type as keyof ReportCateMap] || '未知类型'  //找不到匹配时显示默认文本
  }))
})
    
// 弹窗打开事件
const tableOpen = () => {
  // Object.assign(ruleFormData, props.ruleForm);
}
const ruleFormRef = ref<FormInstance>()
const emits = defineEmits(['beforeClose', 'submitForm']);
// 确定按钮
const submitForm = () => {
  // ruleFormData.value = cloneDeep(props.ruleForm)
  ruleFormData.value = cloneDeep(formattedRuleForm.value)
  console.log(111, ruleFormData);
  if (!ruleFormData.value[0].handle_type) {
    return ElMessage.error("请选择用户处理类型")
  }else if (!ruleFormData.value[0].handle_remark) {
    return ElMessage.error("请输入操作理由")
  }
  emits('submitForm', ruleFormData.value[0], props.tableTitle);
  // 提交成功后将 unable.value 设为 false
  unable.value = false;
}
// 弹窗关闭事件
const cancelClick = () => {
  // 清空表单
  ruleFormRef.value?.resetFields();
  emits('beforeClose', false);
}
// 显式暴露方法给父组件
defineExpose({
  cancelClick
});
</script>
<style scoped lang="scss">
.tableCss {
  width: 100%;
}
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>